<template>
  <div class="register-container">
    <!-- 
      el-form 表单组件
      每个表单项都必须使用 el-form-item 组件包裹
      1、配置 Form 表单验证
      (1) 必须给 el-form 组件绑定 model 为表单数据对象
      (2) 给需要验证的表单项 el-form-item 绑定 prop 属性
          注意：prop 属性需要指定表单对象中的数据名称
      (3) 通过 el-form 组件的 rules 属性配置验证规则
      (4) 手动触发表单验证：
         -- 给 el-form 设置 ref 起个名字(，随便起，不重复即可)
         -- 通过 ref 获取 el-form 组件，调用组件的 validate() 进行验证
     -->
    <el-form 
      class="register-form" 
      ref="registerForm" 
      :model="user" 
      :rules="rules"
      label-width="100px"
      :label-position="labelPosition">
      <div class="register-header">欢迎注册</div>
      <el-form-item prop="name" label="用户名:">
        <el-input 
          v-model="user.name"
          placeholder="请输入手机号">
        </el-input>
      </el-form-item>
      <el-form-item prop="pass" label="密码:">
        <el-input
          v-model="user.pass"
          placeholder="请输入密码">
        </el-input>
      </el-form-item>
      <el-form-item prop="checkPass" label="确认密码:">
        <el-input 
          v-model="user.checkPass"
          placeholder="请再次输入密码">
        </el-input>
      </el-form-item>
       <el-form-item prop="agree">
        <el-checkbox v-model="user.agree">我已阅读并同意用户协议和隐私条款</el-checkbox>  
      </el-form-item>
      <el-form-item>
        <el-button 
          class="registerBtn"
          type="danger" 
          :loading="registerLoading"
          @click="onRegister">
          注册
        </el-button>
      </el-form-item>
      <el-form-item>
        <u>
          <div><span @click="goLogin">去登陆</span></div>
        </u>
      </el-form-item>
    </el-form>
  </div>  
</template>
<script>
import { userRegister } from '@/api/user'
export default {
    name: 'registerIndex',
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码！'))
        } else {
          if (this.user.checkPass !== '') {
            this.$refs.registerForm.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码！'))
        } else if (value !== this.user.pass) {
          callback(new Error('两次输入密码不一致！'))
        } else {
          callback()
        }
      }
      return {
        user: {
          name: '15891211111',             // 手机号
          pass: '123456',             // 验证码
          checkPass: '123456',        // 确认密码
          agree: false          // 是否同意协议
        },
        // checked: false,      // 是否同意协议的选中状态
        registerLoading: false, // 注册的 loading 状态
        sendAuthCode: true,     // 布尔值， 通过 v-show 控制显示 ‘获取按钮’还是倒计
        labelPosition: 'left',
        rules: {
          // 表单验证规则配置
          // 要验证的数据名称：规则列表[]
          name: [
            { required: true, message: '手机号不能为空!', trigger: 'change' },
            { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的手机号格式！', trigger: 'change' }
          ],
          pass: [
            { required: true,  validator: validatePass, trigger: 'change' },
            { pattern: /^\d{6}$/, message: '密码为6位数字！', trigger: 'change' }
          ],
          checkPass: [
            { required: true,  validator: validatePass2, trigger: 'blur' }
          ],
          agree: [
            { 
              // 自定义校验规则  验证通过：callback()  验证失败：callback(new Error('错误消息'))
              validator: (rule, value, callback) => {
                if (value) {
                  callback()
                } else {
                  callback(new Error('请勾选用户同意协议!'))
                }
              },
              // message: '请勾选用户同意协议!', 
              trigger: 'change' 
            }
          ]
        }
      }
    },
    methods: {
      // 注册
      onRegister() {
        this.$refs['registerForm'].validate((valid) => {
          if (valid) {
            userRegister(this.user).then(({ data }) => {
              if (data.success) {
                this.$message({
                  type: 'success',
                  message: '注册成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: '用户名已经存在！'
                })
              }
            })
          } else {
            console.log('error submit')
            return false
          } 
        })
      },
      // 去登陆
      goLogin() {
        this.$router.push('/login')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .register-container {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: url("./register.jpg") no-repeat;
    background-size: cover;
  }
  .register-header {
    font-size: 30px;
    margin-bottom: 30px;
    color: #F56C6C;
    font-weight: bold;
    text-align:center;
  }
  .register-form {
      background-color: #fff;
      padding: 50px;
      min-width: 300px;
    }
  .registerBtn {
    width: 100%;
    margin-top: 30px;
  }
  .auth_input {
    width: 170px;
    margin-right: 20px;
  }
  u {
    color: #049EFF;
    text-align: center;
  }
</style>
